var React = require('react');
var PageView = require('../../controls/PageView');
var Panel = require('../../controls/Panel');
var ListView = require('../../controls/ListView');
var FlowCanvas = require('../../controls/graph/FlowCanvas');
var Node = require('../../controls/graph/Node');
var DOMUtil = require('../../utils/DOMUtil');
module.exports = React.createClass({
	getInitialState: function () {
		return {
			componentItems: [
				{ text: 'Host', icon: 'fa-ioxhost' },
				{ text: 'Port', icon: 'fa-stop-circle' }
			],
			data: {
				nodes: [
	                { id: 1, x: 50, y: 50, childs: [{id:5},{id:6},{id:15},{id:16},{id:25},{id:26}] },
	                { id: 2, x: 250, y: 250, childs: [{id:7}, {id:8}] },
	                { id: 3, x: 50, y: 250, childs: [{id:9}, {id:10}] },
	                { id: 4, x: 250, y: 50, childs: [{id:11}, {id:12}] }
	            ],
	            links: [
	                { target: '26', source: '7'},
					{ target: '25', source: '9'},
					{ target: '11', source: '7'},
					{ target: '12', source: '8'}
	            ]
			}
		}
	},
	componentDidMount: function (){

	},
	__nodeRender: function (node, props) {
		return <div className="node-content">
			{
				(props.childs||[]).map(function (item, index){
					item.onDidMount= function (_node, _props){
						node.setNode(_node._id, _node);
						props.onDidMount(_node, _props);
					};
					return <Node key={index} parent={node} type="type-child"  draggable={false} {...item} />;
				}.bind(this))
			}
		</div>;
	},
	__onItemDragStart: function (event, item, index){
		var _targetPosition = DOMUtil.getPosition(event.target);
		item.index = index;
		item.diffPosition = [event.pageX - _targetPosition.x, event.pageY - _targetPosition.y]
		event.dataTransfer.setData("data", JSON.stringify(item));
	},
	__itemRender: function (item, index) {
		return <div draggable={true} onDragStart={(event)=>{this.__onItemDragStart(event, item, index)}}><div><i className={'fa ' + item.icon}></i></div><div>{item.text}</div></div>;
	},
	__onFlowCanvasDrop: function (event, data){
		var _basePosition = DOMUtil.getPosition(event.target),
			_diffPosition = data.diffPosition,
			_realPosition = [event.offsetX - _diffPosition[0], event.offsetY - _diffPosition[1]];

		var _overElement = document.elementFromPoint(event.pageX - _diffPosition[0] + 8, event.pageY - _diffPosition[1]+8);
		console.log(_overElement);

		this.state.data.nodes.push({id: 'a', x: _realPosition[0], y: _realPosition[1]});
		this.setState({
			data: this.state.data
		});
	},
	render:function(){
		return (
			<PageView
				hHeight={48}
				icon={this.props.icon}
				title={this.props.title}
				toolbarItems={this.state.toolbarItems}
				toolbarItemFloatDirection="right">
				<li className="flex-item">
					<input type="search" placeholder="Search Data Source" name="search" style={{width: 200, height: 35 }} />
				</li>
				<div className="flow-content" style={{width:'100%',height:'100%'}}>
					<FlowCanvas
						onDrop={this.__onFlowCanvasDrop}
						nodeRender={this.__nodeRender}
						data={this.state.data} />
					<Panel
						title='Component List'
						icon='fa-plus'
						mode='flow'
						skin='normal'
						draggable={true}
						dragStart={[10, 10]}
						dragVector={['right', 'top']}
						style={{ width: 300, zIndex: 10 }}>
						<div></div>
						<ListView
							data={this.state.componentItems}
							itemRender={this.__itemRender}
							skin='icon-list'/>
					</Panel>
				</div>
			</PageView>
		);
	}
});
